<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<style type="text/css">
			[ng-cloak] {
				display: none;
			}
		</style>
	</head>

	<body ng-app="mainApp" ng-controller="goodsIndexCtrl" ng-cloak>
		<!-- 主页面标题 -->
		<header class="mui-bar mui-bar-nav">
			<h1 style="text-align: center;">
				<img  ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{agent.iconUrl}}" width="80" height="25" >
			</h1>
		</header>
		<!-- 主页面内容容器 -->
		<div class="mui-content ">
			<!-- 主界面具体展示内容 -->
			<div id="slider" class="mui-slider">
		</div>
		<div class="notice">
			<div class="notice_tit"><i class="mui-icon mui-icon-extra mui-icon-extra-notice"></i>公告通知：</div>
			
			<div id="wrapper" class="wrapper">
				<marquee>
				<div class="inner">
					<p class="txt" id="noticeText"></p>
				</div></marquee>
			</div>
			
		</div>

		<ul class="mui-table-view mui-grid-view mui-grid-9 style_icon" id="segmentedControl">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 " ng-repeat="gtype in gTypeList">
				<a href="javascript:;" ng-click="gtypeOneClick(gtype)">
					<span class="mui-icon "><img ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{gtype.iconUrl}}" height="20"></span>
					<div class="mui-media-body">{{gtype.title}}</div>
				</a>
			</li>
		</ul>
		<div class="mui-content pro_con subclass" style="min-height: 200px;">
			<div id="item1" class="mui-control-content mui-active" ng-if="curType!=undefined&&curType.typeList.length>0">
				<h3>—— {{curType.title}}分类  ——</h3>
				<ul class="mui-table-view mui-grid-view ">
					<li class="mui-table-view-cell mui-media mui-col-xs-6" ng-repeat="type in typeList">
						<a href="#" ng-click="typeClick(type)">
							<img ng-src="{{baseUrl}}/dapi/download/getImageIO?imgUrl={{type.iconUrl}}" height="55">
							<div class="mui-media-body price">{{type.typeName}}</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		</div>
		<div class="mui-off-canvas-backdrop"></div>
		<script src="../js/mui.min.js"></script>
		<!--common---start-->
		<script src="../js/angular/angular.min.js"></script>
		<script src="../js/angular/angular-resource.js"></script>
		<script src="../js/angular/common.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>
		<!--common---end-->
		<script src="../js/service/goodsService.js"></script>
		<script src="../js/service/agentService.js"></script>
		<script>
			(function($) {
				$.init({
					swipeBack: true //启用右滑关闭功能
				});
			})(mui);

			mainApp.controller('goodsIndexCtrl', function($scope, $http, goodsService, agentService) {
				$scope.baseUrl = baseUrl;
				goodsService.getAppPicList(function(data) {
					//字符串转arr
		            var l=data.data.length;
//		            var data1=data.data.substring(1,l-1);
		            var arr=data.data;
		            //获取arr长度
		            var arrl=arr.length-1
		        		//图片html代码
		            //轮播盒子
		            var tmp='<div class="mui-slider-group mui-slider-loop">';
		            //第一个或者最后一个轮播图
		            var tmp1='<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src='+baseUrl+"/dapi/download/getImageIO?imgUrl="
		            //常规轮播图
		            var tmp2='<div class="mui-slider-item"><a href="#"><img src='+baseUrl+"/dapi/download/getImageIO?imgUrl="
		            //公共结尾
		            var tmp3=' id="banner"></a></div>'
		            //按钮盒子
		            var anniu='<div class="mui-slider-indicator">'
		            //第一个按钮盒子
		            var anniu1='<div class="mui-indicator mui-active"></div>'
		            //常规按钮盒子
		            var anniu2='<div class="mui-indicator"></div>'
		        		//循环遍历arr
		            for(i in arr){
		            		//获取img src
		                var img=arr[i].iconUrl;
		            		//判断i是否为0   
		                if(i==0){   
		                    tmp+=tmp1+arr[arrl].iconUrl+tmp3
		                    anniu+=anniu1
		                }else{
		                    anniu+=anniu2
		                }
		                tmp+=tmp2+img+tmp3
		                if(i==arrl){
		                    tmp+=tmp1+arr[0].iconUrl+tmp3
		                }
		            }
		            //轮播盒子结尾
		            tmp+='</div>'
		            //按钮盒子结尾
		            anniu+='</div>'
		            //轮播与按钮拼接
		            tmp+=anniu
		            //获取页面上的盒子
		            var bigbox=document.getElementById('slider')
		            //添加进盒子
		            bigbox.innerHTML=tmp;
		            //手动调用图片轮播的初始化方法
		            var gallery = mui('.mui-slider');
		            gallery.slider({
		              interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
		            });
				}, error);
				
				//获取通知公告
				goodsService.getNotic(function(data) {
					document.getElementById('noticeText').innerHTML = data.data.title;
				}, error);
				//获取代理公司
				agentService.getAgentByUser(function(data) {
					$scope.agent = data.data;
				}, error);
				//获取三级列表菜单
				goodsService.getGoogsTypeList(function(data) {
					$scope.gTypeList = data.data;
				}, error);
				$scope.currUrl = "";
				$scope.gtypeOneClick = function(gtype) {
					window.scrollTo(0, 260);

					$scope.currUrl = gtype.title;
					$scope.curType = gtype;
					$scope.currUrl = gtype.title;
					if(gtype.typeList != undefined && gtype.typeList.length > 0) {
						$scope.typeList = gtype.typeList;
					} else {
						//跳转页面
						mui.openWindow({
							url: "goodsList.html",
							id: 'goodsList' + new Date().getMilliseconds(),
							extras: {
								gtype: gtype.id,
								currUrl: $scope.currUrl

							},
							styles: {
								popGesture: "close"
							}
						});
					}
				}
				$scope.typeClick = function(type) {
					$scope.currUrl = $scope.curType.title + "->" + type.typeName;
					//跳转页面
					mui.openWindow({
						url: "goodsList.html",
						id: 'goodsList' + new Date().getMilliseconds(),
						extras: {
							gtype: type.pId,
							type: type.id,
							currUrl: $scope.currUrl
						},
						styles: {
							popGesture: "close"
						}
					});
				}
			});
		</script>

	</body>

</html>